<script setup lang="ts">
import { onMounted, ref } from "vue";
import bilibilicon from "@/assets/bilibiliavatar.png";
import router from "@/router";
const searchTxt = ref("");
const dialogVisible = ref(false);
const entriesList = [
  {
    id: 1,
    name: "首页",
    path: "/videomain",
  },
  {
    id: 2,
    name: "番剧",
    path: "/",
  },
  {
    id: 3,
    name: "直播",
    path: "/",
  },
  {
    id: 4,
    name: "游戏中心",
    path: "/",
  },
];
//跳转到个人中心path是路径
const jumpToPath = (path) => {
  router.push(path);
};

const searchContents = () => {
  if (searchTxt.value == "") {
    window.alert("请输入搜索内容");
    return;
  }
  //判断是否重复跳转
  // 判断是否重复跳转，如果是，则刷新页面
  if (
    decodeURIComponent(router.currentRoute.value.fullPath) ===
    `/videosearch?searchTxt=${encodeURIComponent(searchTxt.value)}`
  ) {
    location.reload();
    return;
  }
  router
    .push({
      path: "/videosearch",
      query: {
        searchTxt: searchTxt.value,
      },
    })
    .then(() => {
      // 确保路由跳转完成后再刷新页面
      window.location.reload();
    });
};
//判断用户是否登录
const isUserLoggedIn = () => {
  let token = localStorage.getItem("token");
  return token && token !== "null";
};
const avatar = () => {
  const userInfo = this.$store.state.userInfo;
  if (userInfo && userInfo.avatar && userInfo.avatar !== "") {
    return userInfo.avatar;
  } else {
    return bilibilicon;
  }
};
//退出登录
const logout = () => {
  localStorage.removeItem("token");
  location.reload(); //刷新页面
};
//跳传到投稿
const jumpWithLoginUser = () => {
  //打开一个新的页面地址
  //如果当前页面的路径等于我们要跳转的路径，则只需要刷新页面
  // window.location.href='/contribute';
  router.push("/contribute").then(() => {
    // 确保路由跳转完成后再刷新页面
    window.location.reload();
  });
  // this.$router.push('/video/contribute');
};
</script>

<template>
  <div class="bili-header">
    <div class="header-nav-container">
      <div class="left-entry">
        <div v-for="entry in entriesList" :key="entry.id">
          <span @click="jumpToPath(entry.path)">{{ entry.name }}</span>
        </div>
      </div>
      <div class="center-search-bar">
        <form class="nav-search-form">
          <div class="nav-search-content">
            <input
              class="nav-search-input"
              type="text"
              autocomplete="off"
              maxlength="100"
              placeholder="请输入要搜索的内容"
              v-model="searchTxt"
            />
          </div>
          <div class="nav-search-btn">
            <el-button
              icon="el-icon-search"
              circle
              size="mini"
              @click="searchContents"
            />
          </div>
        </form>
      </div>
      <div class="right-entry">
        <div v-if="isUserLoggedIn" class="user-center">
          <el-dropdown>
            <span class="el-dropdown-link">
              <img
                style="height: 50px; width: 50px; border-radius: 50%"
                :src="avatar"
                alt=""
              />
            </span>
            <template #dropdown>
              <el-dropdown-menu>
                <el-dropdown-item>
                  <el-button
                    type="text"
                    style="color: black"
                    @click="jumpToPath('/mySpace')"
                  >
                    个人中心
                  </el-button>
                </el-dropdown-item>
                <el-dropdown-item style="color: black">
                  <el-button type="text" style="color: black" @click="logout">
                    退出登录
                  </el-button>
                </el-dropdown-item>
              </el-dropdown-menu>
            </template>
          </el-dropdown>
        </div>
        <div v-else class="user-center">
          <el-button
            class="login-button"
            type="text"
            @click="dialogVisible = true"
          >
            登录
          </el-button>
          <el-dialog
            title="密码登录"
            v-model:visible="dialogVisible"
            width="30%"
          >
            <LoginDialog />
          </el-dialog>
        </div>
        <!--动态-->
        <!--历史-->
        <!--投稿-->
        <div class="right-entry-content">
          <el-button
            type="warning"
            icon="el-icon-upload2"
            circle
            @click="jumpWithLoginUser"
          />
          <span style="color: white; margin-top: 5px">投稿</span>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped lang="less">
.bili-header {
  .header-nav-container {
    background-color: #f1afde;
    position: absolute;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;

    .left-entry {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-left: 40px;
      span {
        margin-right: 20px;
        color: white;
        font-weight: bolder;
        cursor: pointer;
      }
    }

    .center-search-bar {
      flex: 1 auto;
      min-width: 181px;
      max-width: 500px;
      .nav-search-form {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0 4px 0 4px;
        height: 40px;
        background-color: white;
        border-radius: 8px;
        opacity: 0.8;
        .nav-search-content {
          display: flex;
          align-items: center;
          justify-content: space-between;
          width: 100%;
          height: 36px;
          border: 2px solid transparent;
          border-radius: 6px;
          .nav-search-input {
            width: 100%;
            font-size: 14px;
            padding-right: 8px;
            background-color: transparent;
            border: none;
            box-shadow: none;
            outline: none;
          }
        }

        .nav-search-btn {
          margin: 0;
          padding: 0;
          width: 32px;
          height: 32px;
          border: none;
          border-radius: 6px;
          cursor: pointer;
        }
      }
    }

    .right-entry {
      display: flex;
      flex-direction: row;
      align-items: center;
      padding: 10px;

      .user-center {
        margin-right: 10px;
        .login-button {
          color: #00a1d6;
          width: 50px;
          height: 50px;
          border-radius: 50%;
          font-weight: bold;
          background-color: #fff;
        }
      }
      .right-entry-moments {
        //margin-right: 10px;
        //
        //.el-btn-moments{
        //  height: 100%;
        //}
        margin: 0 10px;
        display: flex;
        flex-direction: column;
        align-items: center;
      }
      .right-entry-content {
        margin: 0 10px;
        //margin-right: 10px;
        display: flex;
        flex-direction: column;
        align-items: center;
      }
    }
  }

  .header-banner-container {
    .banner {
      width: 100%;
    }
  }
}
</style>
